<!DOCTYPE html>
<html>

<head>
<!-- 
    <link href="styles/kendo/web/kendo.common.css" rel="stylesheet">
    <link href="styles/kendo/web/kendo.rtl.css" rel="stylesheet">
    <link href="styles/kendo/web/kendo.material.css" rel="stylesheet">
    <link href="styles/kendo/web/kendo.material.mobile.css" rel="stylesheet">
 -->
    <link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css" rel="stylesheet" />
    <link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css" rel="stylesheet" />
    <link href="//demos.telerik.com/kendo-ui/content/shared/styles/examples.css" rel="stylesheet" />
    <script data-th-src="@{styles/js/require.js}"></script>
    <script type="text/javascript">
        require.config({
            baseUrl: "plugins/kendo", // the path where the kendo scripts are present
            paths: {
                "jquery": "../jQuery/jquery-2.2.3.min",
                "jquery-ui": "../jQueryUI/jquery-ui.min",
                "bootstrap": "../../bootstrap/js/bootstrap.min",
                "raphael": "../raphael/raphael.min",
                "morris": "../morris/morris.min",
                "sparkline": "../sparkline/jquery.sparkline.min",
                "jvectormap": "../jvectormap/jquery-jvectormap-1.2.2.min",
                "jvectormap-en": "../jvectormap/jquery-jvectormap-world-mill-en",
                "knob": "../knob/jquery.knob",
                "moment": "../moment/moment.min",
                "daterangepicker": "../daterangepicker/daterangepicker",
                "datepicker": "../datepicker/bootstrap-datepicker",
                "bootstrap-wysihtml5": "../bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min",
                "slimscroll": "../slimScroll/jquery.slimscroll.min",
                "fastclick": "../fastclick/fastclick",
                "app": "../../styles/js/app",
                "dashboard": "../../styles/js/pages/dashboard",
                "demo": "../../styles/js/demo"
            },
            shim: {
                "bootstrap": {
                    deps: ["jquery"]
                },
                "slimscroll": {
                    deps: ["jquery"]
                },
                "app": {
                    deps: ["jquery", "bootstrap"]
                }
            }
        });
            require(["jquery","kendo.grid"], function($, kendo) {
            	$("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                        },
                        pageSize: 20
                    },
                    height: 550,
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5
                    },
                    columns: [{
                        template: "<div class='customer-photo'" +
                                        "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                    "<div class='customer-name'>#: ContactName #</div>",
                        field: "ContactName",
                        title: "Contact Name",
                        width: 240
                    }, {
                        field: "ContactTitle",
                        title: "Contact Title"
                    }, {
                        field: "CompanyName",
                        title: "Company Name"
                    }, {
                        field: "Country",
                        width: 150
                    }]
                });
        });
    </script>
</head>
<style type="text/css">
    .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>
<body id="exampleWrap">
<div id="grid"></div>
</body>

</html>